<template>
  <div>
    <el-table class="table" :data="tableData" show-overflow-tooltip>
      <el-table-column fixed type="index" label="序号" width="70" />

      <el-table-column type="" label="面试结果" width="100" v-if="phase == 3">
        <template #default="scope">
          <div
            :class="{
              success: scope.row.interviewerResultSecond === 0,
              failed: scope.row.interviewerResultSecond === 1,
            }"
          >
            {{
              scope.row.interviewerResultSecond === 0 ? "面试通过" : "暂不考虑"
            }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          {{ scope.row.sex == 0 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column prop="educationalBackground" label="学历" width="" />
      <el-table-column prop="profession" label="专业" width="" />
      <el-table-column prop="requireDeptName" label="需求部门" width="" />
      <el-table-column
        prop="applicationPositonName"
        label="岗位名称"
        width=""
      />
      <el-table-column prop="requirePersonNumber" label="需求人数" width="" />
      <el-table-column prop="hopeArrivalTime" label="希望到岗日期" width="" />
      <el-table-column prop="createPersonName" label="创建人" width="" />
      <el-table-column prop="createTime" label="创建时间" width="" />

      <el-table-column fixed="right" prop="address" label="操作" width="220">
        <template #default="scope">
          <el-button
            type="text"
            class="other-btn"
            @click="handleClick(scope.row)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            class="other-btn"
            @click="handleAdd(scope.row)"
            v-if="phase != 3 && scope.row.interviewerButton == true"
            >录入面试信息</el-button
          >
          <el-button
            type="text"
            class="other-btn"
            @click="handleAdd(scope.row)"
            v-if="phase == 3 && scope.row.interviewerButton == true"
            >录入offer信息</el-button
          >
          <!-- interviewerResultSecond为0：二轮面试通过 1：二轮面试不通过 -->
          <!-- isEnter：0 ：已经录过面试offer信息  1：未录入 -->
          <!-- interviewerResultSecond= -->
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    ></Pagination>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { getCommonTableHeight } from "@/utils/commonTableHeight.js";
import { ElButton } from "element-plus";
import { useRouter } from "vue-router";

import Pagination from "@/components/Pagination/pageination.vue";
const props = defineProps({
  isShowBtn: Boolean,
  tableData: Array,
  phase: Number,
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: 10,
    }),
  },
});
const emit = defineEmits(["handleClick"]);
const router = useRouter();
const tabHeight = ref(0);

// 页面高度
const updateViewportHeight = () => {
  tabHeight.value = getCommonTableHeight();
};
onMounted(() => {
  updateViewportHeight(); // 初始化视口高度
  window.addEventListener("resize", updateViewportHeight); // 监听窗口大小变化
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewportHeight); // 移除监听
});
const handleClick = (row) => {
  emit("handleClick", row);
};

// 编辑
const handleAdd = (row) => {
  emit("handleAdd", row);
};

const sizeChange = (size) => {
  console.log(size, "size");
  emit("sizeChange", size);
};
const currentChange = (page) => {
  console.log(page, "1");
  emit("currentChange", page);
};
</script>

<style lang="scss" scoped>
// :deep(.el-table__header) {
//   height: 70px;
// }

.elTag {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.success {
  background-color: #43ad43;
  /* 绿色背景 */
  color: #fff;
  /* 文字颜色 */
  padding: 4px;
  border-radius: 4px;
}

.failed {
  background-color: #d04f4f;
  /* 红色背景 */
  color: #fff;
  /* 文字颜色 */
  padding: 4px;
  border-radius: 4px;
}
</style>
